<template>
  <div class="vehicle-record">
    <div class="header">
      <router-link to="/main/wuye/vehicle/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>用车记录</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="使用中" name="using">
          <el-table :data="usingList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="vehicleNo" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="driver" label="司机" width="120"></el-table-column>
            <el-table-column prop="startTime" label="出发时间" width="180"></el-table-column>
            <el-table-column prop="startMileage" label="出发里程" width="120">
              <template slot-scope="scope">
                {{ scope.row.startMileage }}公里
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleReturn(scope.row)">归还</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="vehicleNo" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="driver" label="司机" width="120"></el-table-column>
            <el-table-column prop="usedTime" label="使用时长" width="120">
              <template slot-scope="scope">
                {{ scope.row.usedTime }}小时
              </template>
            </el-table-column>
            <el-table-column prop="usedMileage" label="行驶里程" width="120">
              <template slot-scope="scope">
                {{ scope.row.usedMileage }}公里
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="用车记录详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="record-detail" v-if="currentRecord">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentRecord.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentRecord.applicant }}</el-descriptions-item>
          <el-descriptions-item label="车牌号">{{ currentRecord.vehicleNo }}</el-descriptions-item>
          <el-descriptions-item label="司机">{{ currentRecord.driver }}</el-descriptions-item>
          <el-descriptions-item label="用车类型">{{ currentRecord.useType }}</el-descriptions-item>
          <el-descriptions-item label="目的地">{{ currentRecord.destination }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>行驶记录</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="出发时间">{{ currentRecord.startTime }}</el-descriptions-item>
            <el-descriptions-item label="出发里程">{{ currentRecord.startMileage }}公里</el-descriptions-item>
            <el-descriptions-item label="出发油量">{{ currentRecord.startFuel }}%</el-descriptions-item>
            <el-descriptions-item label="出发备注">{{ currentRecord.startRemark }}</el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.endTime" label="归还时间">{{ currentRecord.endTime }}</el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.endMileage" label="归还里程">{{ currentRecord.endMileage }}公里</el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.endFuel" label="归还油量">{{ currentRecord.endFuel }}%</el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.endRemark" label="归还备注">{{ currentRecord.endRemark }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section" v-if="currentRecord.usageRecords">
          <h4>使用记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentRecord.usageRecords"
              :key="index"
              :timestamp="record.time">
              {{ record.event }}
              <p class="record-content">{{ record.content }}</p>
              <p v-if="record.remark" class="record-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 归还表单对话框 -->
    <el-dialog title="车辆归还" :visible.sync="returnDialogVisible" width="50%">
      <el-form :model="returnForm" label-width="100px">
        <el-form-item label="归还里程">
          <el-input-number v-model="returnForm.endMileage" :min="0"></el-input-number>
          <span class="unit">公里</span>
        </el-form-item>

        <el-form-item label="归还油量">
          <el-input-number v-model="returnForm.endFuel" :min="0" :max="100"></el-input-number>
          <span class="unit">%</span>
        </el-form-item>

        <el-form-item label="车辆状况">
          <el-radio-group v-model="returnForm.condition">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="异常">异常</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="异常说明" v-if="returnForm.condition === '异常'">
          <el-input type="textarea" v-model="returnForm.abnormalDesc" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="备注说明">
          <el-input type="textarea" v-model="returnForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="returnDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReturn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'using',
      usingList: [
        {
          applyNo: 'YC202403150001',
          applicant: '张三',
          vehicleNo: '粤B12345',
          driver: '李四',
          useType: '公务用车',
          destination: '科技园区',
          startTime: '2024-03-15 09:00:00',
          startMileage: 12500,
          startFuel: 85,
          startRemark: '车况正常'
        }
      ],
      completedList: [],
      detailDialogVisible: false,
      returnDialogVisible: false,
      currentRecord: null,
      returnForm: {
        endMileage: 0,
        endFuel: 0,
        condition: '正常',
        abnormalDesc: '',
        remark: ''
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentRecord = row
      this.detailDialogVisible = true
    },
    handleReturn(row) {
      this.currentRecord = row
      this.returnForm = {
        endMileage: row.startMileage,
        endFuel: row.startFuel,
        condition: '正常',
        abnormalDesc: '',
        remark: ''
      }
      this.returnDialogVisible = true
    },
    submitReturn() {
      if (this.returnForm.endMileage <= this.currentRecord.startMileage) {
        this.$message.error('归还里程必须大于出发里程')
        return
      }

      if (this.returnForm.condition === '异常' && !this.returnForm.abnormalDesc) {
        this.$message.error('请填写异常说明')
        return
      }

      // TODO: 提交归还信息到后端
      const usageRecord = {
        time: new Date().toLocaleString(),
        event: '车辆归还',
        content: `行驶里程：${this.returnForm.endMileage - this.currentRecord.startMileage}公里`,
        remark: this.returnForm.remark
      }

      this.currentRecord.usageRecords = this.currentRecord.usageRecords || []
      this.currentRecord.usageRecords.unshift(usageRecord)

      // 从使用中列表移动到已完成列表
      const index = this.usingList.findIndex(item => item.applyNo === this.currentRecord.applyNo)
      if (index > -1) {
        const record = { ...this.currentRecord }
        record.endTime = new Date().toLocaleString()
        record.endMileage = this.returnForm.endMileage
        record.endFuel = this.returnForm.endFuel
        record.endRemark = this.returnForm.remark
        record.usedTime = this.calculateUsedTime(record.startTime, record.endTime)
        record.usedMileage = record.endMileage - record.startMileage
        this.usingList.splice(index, 1)
        this.completedList.unshift(record)
      }

      this.$message.success('车辆归还成功')
      this.returnDialogVisible = false
    },
    calculateUsedTime(startTime, endTime) {
      const start = new Date(startTime)
      const end = new Date(endTime)
      const hours = Math.round((end - start) / (1000 * 60 * 60))
      return hours
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-record {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .record-content {
      margin: 5px 0 0;
      color: #606266;
    }

    .record-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style> 